<html>
<body>
<script>
if (window.testRunner)
    testRunner.waitUntilDone();

function shouldNotBeCalled() {
    testFailed("Promise was rejected.");
    finishJSTest();
}

var aCanvas = document.createElement('canvas');
aCanvas.setAttribute('width', '10');
aCanvas.setAttribute('height', '10');
var aCtx = aCanvas.getContext('2d');
aCtx.fillStyle = 'rgb(0, 255, 0)';
aCtx.fillRect(0, 0, 20, 20);

var bCanvas = document.createElement('canvas');
bCanvas.setAttribute('width', '10');
bCanvas.setAttribute('height', '10');
var bCtx = bCanvas.getContext('2d');
bCtx.fillStyle = 'red';
bCtx.fillRect(0, 0, 20, 20);

var canvas = document.createElement('canvas');
canvas.setAttribute('width', '50');
canvas.setAttribute('height', '30');
var ctx = canvas.getContext('2d');
document.body.appendChild(canvas);

var image = new Image();
image.onload = imageLoaded;
image.src = aCanvas.toDataURL();

var d;

var imageLoaded = false;
var blobLoaded = false;

function imageLoaded() {
    imageLoaded = true;
    loaded();
}

var xhr = new XMLHttpRequest();
xhr.open("GET", 'resources/pattern.png');
xhr.responseType = 'blob';
xhr.send();
xhr.onload = function() {
    blob = xhr.response;
    blobLoaded = true;
    loaded();
}

function loaded() {
    if (imageLoaded && blobLoaded) {
        d = aCtx.getImageData(0, 0, 10, 10);
        createImageBitmap(image).then(callback('Image'));
        createImageBitmap(d).then(callback('Data'));
        createImageBitmap(aCanvas).then(callback('Canvas'));
        // The blob image has a green square at (x,y,w,h) = (10, 0, 10, 10).
        createImageBitmap(blob, 10, 0, 10, 10).then(callback('Blob'));
    }
}

var imageBitmaps = {};

function callback(name) {
    var name = name;
    return function(imageBitmap) {
        switch(name) {
        case 'Image':
            imageBitmaps.image = imageBitmap;
            image.onload = function() {
                ctx.drawImage(imageBitmaps.image, 0, 0);
                createImageBitmap(imageBitmaps.image).then(callback('ImageBitmapImage'));
                checkIfDone();
            };
            image.src = bCanvas.toDataURL();
            break;
        case 'Data':
            imageBitmaps.data = imageBitmap;
            d = 0;
            ctx.drawImage(imageBitmaps.data, 11, 0);
            createImageBitmap(imageBitmaps.data).then(callback('ImageBitmapData'));
            checkIfDone();
            break;
        case 'Canvas':
            imageBitmaps.canvas = imageBitmap;
            aCtx.clearRect(0, 0, 10, 10);
            ctx.drawImage(imageBitmaps.canvas, 22, 0);
            createImageBitmap(imageBitmaps.canvas).then(callback('ImageBitmapCanvas'));
            checkIfDone();
            break;
        case 'Blob':
            imageBitmaps.blob = imageBitmap;
            blob = 0;
            ctx.drawImage(imageBitmaps.blob, 33, 0);
            createImageBitmap(imageBitmaps.blob).then(callback('ImageBitmapBlob'));
            checkIfDone();
            break;
        case 'ImageBitmapImage':
            imageBitmaps.image = 0;
            ctx.drawImage(imageBitmap, 0, 11);
            checkIfDone();
            break;
        case 'ImageBitmapData':
            d = 0;
            imageBitmaps.data = 0;
            ctx.drawImage(imageBitmap, 11, 11);
            checkIfDone();
            break;
        case 'ImageBitmapCanvas':
            aCtx.clearRect(0, 0, 10, 10);
            imageBitmaps.canvas = 0;
            ctx.drawImage(imageBitmap, 22, 11);
            checkIfDone();
            break;
        case 'ImageBitmapBlob':
            aCtx.clearRect(0, 0, 10, 10);
            imageBitmaps.blob = 0;
            ctx.drawImage(imageBitmap, 33, 11);
            checkIfDone();
            break;
        }
    }
}

var checkNum = 0;
function checkIfDone() {
    if (++checkNum == 8 && window.testRunner)
        testRunner.notifyDone();
}

</script>
<p>There should be 8 green squares displayed in a 2 row by 4 column grid.</p>
</body>
</html>
